<template>
  <view class="container">
		<!-- 编辑区域 -->
    <view class="edit-wrap">
			<view class="header">
        <text class="title">原文</text>
      </view>
      <view class="content">
        <uni-easyinput
          type="textarea"
          v-model="value"
          placeholder="输入原文"
          trim="both"
        ></uni-easyinput>
      </view>
			<view class="footer">
				<view class="op">粘贴<uni-icons fontFamily="CustomFont" :size="18" color="#BFC6CA">{{'\ue687'}}</uni-icons></view>
				<view class="op">清空<uni-icons type="trash" size="18" color="#BFC6CA"></uni-icons></view>
			</view>
    </view>
		<!-- 类型选择 -->
    <view class="selector-wrap">
      <view class="selector-item">
        <view class="desc">
          <text class="title">改写风格</text>
          <text class="content">请选择</text>
        </view>
        <uni-icons type="right" size="20"></uni-icons>
				<uni-data-picker 
					popup-title="请选择类型" 
					placeholder=""
					:localdata="items"
					@change="onchange"
					:clear-icon="false"
					class="custom-picker">
				</uni-data-picker>
      </view>
      <view class="selector-item">
        <view class="desc">
          <text class="title">语言</text>
          <text class="content">请选择</text>
        </view>
        <uni-icons type="right" size="20"></uni-icons>
				<uni-data-picker 
					popup-title="请选择语言" 
					placeholder=""
					:localdata="itemsZ"
					@change="onchange"
					:clear-icon="false"
					class="custom-picker">
				</uni-data-picker>
      </view>
			<view class="selector-item">
        <view class="desc">
          <text class="title">长度调整</text>
          <text class="content">请选择</text>
        </view>
        <uni-icons type="right" size="20"></uni-icons>
				<uni-data-picker 
					popup-title="请选择字数" 
					placeholder=""
					:localdata="itemsZ"
					@change="onchange"
					:clear-icon="false"
					class="custom-picker">
				</uni-data-picker>
      </view>
			<view class="selector-item">
        <view class="desc">
          <text class="title">改写目标</text>
          <text class="content">请选择</text>
        </view>
        <uni-icons type="right" size="20"></uni-icons>
				<uni-data-picker 
					popup-title="请选择" 
					placeholder=""
					:localdata="itemsZ"
					@change="onchange"
					:clear-icon="false"
					class="custom-picker">
				</uni-data-picker>
      </view>
    </view>
		<!-- 提交按钮 -->
    <button class="submit-button" @click="submitAIText">文本改写</button>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 脚本类型
const scriptTypes = ["短视频", "广告文案", "影视剧本", "对话场景"];
const scriptType = ref(0); // 默认选中“短视频”
const keywords = ref(""); // 用户输入的关键词或大纲
const wordCount = ref(300); // 默认字数为 300
const generatedScript = ref(""); // 生成的脚本内容

const show = ref(false);
const items = ref([
  {
    text: "正式",
    value: "0",
  },
  {
    text: "幽默",
    value: "1",
  },
  {
    text: "学术",
    value: "2",
  },
	{
    text: "通俗",
    value: "3",
  },
	{
    text: "创意",
    value: "3",
  },
	{
    text: "古风文",
    value: "3",
  },
	{
    text: "诗意表达",
    value: "3",
  },
	{
		text:"自定义",
		value:"4"
	}
]);
const itemsZ= ref([
	{
    text: "简体中文",
    value: "0",
  },
	{
    text: "繁体中文",
    value: "1",
  },
  {
    text: "英文",
    value: "2",
  },
  {
    text: "日语",
    value: "3",
  }
])
const itemsX= ref([
	{
    text: "优化可读性",
    value: "0",
  },
	{
    text: "增强说服力",
    value: "1",
  },
  {
    text: "口语化表达",
    value: "2",
  },
  {
    text: "日语",
    value: "3",
  }
])
const value = ref("")
const popupRef = ref(null)

const onchange = (e) => {
  const value = e.detail.value;
};

const openAiScript = () => {
	console.log("popupRef",popupRef.value);
	popupRef.value.open('bottom');
}

const closeAiScript = () => {
	popupRef.value.close();
}

// 切换脚本类型
const onScriptTypeChange = (event) => {
  scriptType.value = event.detail.value;
};

const submitAIText = () => {
	uni.navigateTo({
    url: "/pages/texttMode/aiTextDetail",
  });
}
</script>

<style lang="scss" scoped>
@font-face {
	font-family: CustomFont;
	src: url('../../static/iconfont.ttf');
}
.container {
  padding: 20px;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  /* background: #fafcff; */
	background: linear-gradient(to bottom, #C4DCFA, #f0f0f0);
}

.edit-wrap {
  background: white;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
  border-radius: 15rpx;
  padding: 10rpx 0;
  margin-bottom: 40rpx;
  box-sizing: border-box;
	 .header {
    display: flex;
    padding: 10rpx 20rpx 20rpx 20rpx;
    justify-content: space-between;
		align-items: center;
    border-bottom: 1rpx solid #F6F7FB;
		.title {
			font-size: 28rpx;
			font-weight: bold;
		}
  }
	.content {
		&::v-deep .is-input-border {
			border: none;
		}
		&::v-deep .uni-easyinput__content-textarea {
			height: 400rpx;
			min-height: 400rpx;
		}
	}
	.footer {
		padding: 20rpx 10rpx;
		border-top: 1rpx solid #F6F7FB;
		display: flex;
		flex-direction: row-reverse;
		color: #BFC6CA;
		.op {
			margin-right: 20rpx;
		}
	}
}

.selector-wrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20rpx;
	flex-wrap: wrap;
  .selector-item {
		position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 48%;
    height: 140rpx;
    padding: 30rpx 20rpx;
		margin-bottom:20rpx;
    box-sizing: border-box;
    background: white;
    border-radius: 15rpx;
    font-size: 30rpx;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.05);
		.custom-picker {
			position: absolute;
			width: 100%;
			height: 100%;
		}
		&::v-deep .input-value {
			border: none;
			height: 140rpx;
			visibility: hidden;
		}
		&::v-deep .arrow-area {
			display: none;
		}
    .desc {
      display: flex;
      flex-direction: column;
    }
    .title {
      font-weight: bold;
    }
    .content {
      color: #90a4ae;
    }
  }
}

.submit-button {
  background-color: #3386F1;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  width: 100%;
  margin-bottom: 20px;
}
</style>
